.reader-share__button {
	align-items: center;
	box-sizing: border-box;
	color: var( --color-text-subtle );
	display: inline-flex;
	padding: 4px;
	position: relative;

	&:hover,
	&:focus,
	&:active {
		cursor: pointer;
		color: var( --color-primary );
	}

	.gridicon {
		transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 );
	}

	&.is-active {
		color: var( --color-primary );

		.gridicon {
			fill: var( --color-primary );
		}
	}
}

.reader-share__button-label {
	margin-left: 6px;

	@include breakpoint( '<480px' ) {
		display: none;
	}
}

.reader-share__popover {
	@include breakpoint( '<480px' ) {
		width: 152px;
		padding-right: 2px;
	}
}

.reader-share__popover-item {
	span {
		display: inline-block;
		line-height: 24px;
		margin-left: 34px;

		@include breakpoint( '>480px' ) {
			margin-left: 27px;
		}
	}

	.gridicon,
	.social-logo {
		height: 24px;
		width: 24px;
		position: absolute;
		top: 8px;
		left: 18px;
		padding: 0;
		fill: var( --color-neutral-light );

		@include breakpoint( '>480px' ) {
			left: 11px;
		}
	}

	.gridicons-my-sites {
		fill: var( --color-primary );
	}

	.social-logo.twitter {
		fill: var( --color-twitter );
	}

	.social-logo.facebook {
		fill: var( --color-facebook );
	}

	&:hover,
	&:focus {
		.gridicon,
		.social-logo {
			fill: var( --color-text-inverted );
		}
	}
}

.reader-share__popover {
	min-width: 240px;
}

.reader-share__site-selector.site-selector {
	border-top: 1px solid var( --color-neutral-10 );
}

.reader-share__site-selector .site-selector__sites {
	max-height: 25vh;
	overflow-y: auto;
	text-align: left;
}

.reader-share__site-selector .site__content {
	padding: 12px 16px;
}

.reader-share__site-selector .site__title,
.reader-share__site-selector .site__domain {
	&::after {
		@include long-content-fade( $color: var( --color-surface-rgb ) );
		border-radius: 50%;
	}
}
